<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>00</h1>
    <button onclick="stop()">停止观察</button>
    <button onclick="change()">改动h1,添加class以及内容</button>
    <button onclick="takeRecords()">takeRecords</button>

    <script>
      const h1 = document.querySelector('h1');
      const text = document.createTextNode('0');
      document.body.appendChild(text);

      // 创建一个观察器
      const obj = new MutationObserver((MutationRecord, observe) => {
        /**
         * MutationRecord 描述了所有触发改动的信息数组
         * observe 一个 MutationObserver 对象,就是当前观察器实例
         * **/
        console.log(MutationRecord, observe);
      });

      // 开始观察节点
      obj.observe(text, {
        // subtree: true,
        // attributes: true,
        characterData: true, // 只对 text 文本节点生效
      });

      function stop() {
        // 停止观察
        obj.disconnect();
      }

      function change() {
        h1.textContent = '我是改动后的内容';
        h1.classList.add('red');
        text.textContent = '1';
      }

      function takeRecords() {
        console.log(obj.takeRecords());
      }
    </script>
  </body>
</html>
